<template>
	<view class="info">
		<view class="uni-padding-wrap">
			<form :data="form">
				<view class="uni-form-item uni-column uni-inline-item">
					<label class="title">标题</label>
					<input style="text-align: right;" class="uni-input" v-model.trim="form.title" placeholder="请输入标题" />
				</view>
				<view class="uni-form-item uni-column uni-inline-item">
					<label class="title">地址</label>
					<input style="text-align: right;" class="uni-input" v-model.trim="form.address" placeholder="请输入地址" />
				</view>
				<view class="uni-form-item uni-column uni-inline-item">
					<label class="title">日期</label>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker mode="date" :value="form.date" :start="startDate" :end="endDate" @change="bindDateChange">
									<view style="text-align: right;" class="uni-input">{{ form.date ? form.date : '请选择日期' }}</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
				<view class="uni-btn-v"><button class="submit" type="primary" @click="submit">提交</button></view>
			</form>
		</view>
	</view>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import { get, post, showToast, copy } from '@/static/utils/index';
import { uploadFile } from '@/static/utils/index';
export default {
	data() {
		return {
			tempFilePath: '',
			savedFilePath: '',
			form: {
				title: '',
				address: '',
				date: '',
				manage_id: '',
				id: ''
			},
			temp: {}
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	created() {
		this.form.manage_id = localStorage.getItem('manager_id');
		this.form.id = this.$route.query.id ? this.$route.query.id : '';
		this.temp = copy(this.form);
		if (this.form.id) this.getLectureDetail();
	},
	methods: {
		getLectureDetail() {
			this.$store.dispatch('getLectureDetail', Object.assign({}, {id:this.form.id})).then(res => {
				if (res.code == 200) {
					this.form = res.data;
				}
			});
		},
		bindDateChange: function(e) {
			this.form.date = e.target.value;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		bindDateChange: function(e) {
			this.form.date = e.target.value;
		},
		//提交
		submit() {
			let formData = this.form;
			if (!formData.title) {
				showToast('请填写标题');
				return;
			}
			if (!formData.address) {
				showToast('请填写地址');
				return;
			}
			if (!formData.date) {
				showToast('请填写日期');
				return;
			}
			this.$store.dispatch('setLecture', Object.assign({}, formData)).then(res => {
				if (res.code == 200) {
					showToast('信息提交成功');
					this.form = copy(this.temp);
				}
			});
		}
	}
};
</script>

<style>
.info {
	min-height: 100vh;
	background-color: #ffffff;
}
.label {
	padding-top: 20upx;
	margin-bottom: 20upx;
	font-size: 32upx;
	color: #9c9c9c;
}
.flex-item {
	margin: 10upx;
	width: 50%;
	text-align: center;
	border-radius: 20upx 20upx 0 0;
	overflow: hidden;
	padding-bottom: 20upx;
	cursor: pointer;
}
.idcard_p img,
.idcard_n img,
.bank_thumb img {
	width: 100%;
	height: 100px;
	height: unset;
}
font {
	color: #0066cc;
}
.idcard_p button,
.idcard_n button,
.bank_thumb button {
	background: #5881ff;
	color: #ffffff;
	border-radius: 0 0 20upx 20upx;
	margin-top: -16upx;
	font-size: 32upx;
}
.submit {
	background-color: #5881ff;
}

.flex-item-V {
	width: 100%;
	text-align: center;
	height: 100upx;
}
.blank {
	height: 20upx;
	background-color: #f4f7fe;
}
.uni-form-item {
	border-bottom: 1px solid #ececec;
}
label {
	display: inline;
	vertical-align: middle;
	width: 80upx;
}
.article {
	background-color: #ffffff;
	max-height: 50vh;
	overflow-y: scroll;
	padding: 20upx;
}
</style>
